<template>
	<view>
		<view class="listbox" v-for="(item, index) in familylist" :key="index">
			<view class="namebox">
				<view class="nameinfo">
					<text>{{ item.name }}</text>
					<!-- <text class="ml-20">{{ item.mobile.slice(0, 3) }}****{{ item.mobile.slice(7, 11) }}</text> -->
				</view>
				<!-- <image @click.native="removeAddress(item.id)" src="../../static/lj.png" style="width: 44rpx;height: 44rpx;"></image> -->
			</view>
			<view class="info">
				<!-- <view class="addressinfo">{{ item.province }} {{ item.city }} {{ item.town }} {{ item.street }}</view> -->
				<view class="edit" @click.stop="editAddress(item.id)">编辑</view>
			</view>
			
			<!-- <uni-icons  class="remove" type="trash" color="#b0b0b0" size="24" /> -->
		</view>
		<kong v-if="familylist.length==0"></kong>
		<view style="height: 180rpx;"></view>
		<view class="navbut" @click="toAdd">
			<view class="addaddress">
				<!-- <image src="../../static/image/add1.png"></image> -->
				添加成员
			</view>
		</view>
	</view>
</template>

<script>
import kong from '../../components/kong.vue'
export default {
	components: { kong },
	data() {
		return {
			familylist: []
		}
	},
	onShow() {
		this.getList()
	},
	methods: {
		getList() {
			this.$http({
				url: '/api/course/family_list',
			}).then(res=>{
				this.familylist = res.data
				console.log(res.data,'res.data')
			})
		},
		toAdd() {
			uni.navigateTo({ url: '/pages/familyinfo/familyinfo' })
		},
		editAddress(id){
			uni.navigateTo({ url: '/pagemy/addfamily/addfamily?id='+id })
		},
		removeAddress(id){
			uni.showModal({
				title: '提示',
				content: '确定删除该成员吗？',
				success: async(res) => {
					if (res.confirm) {
						await this.$http({
							url: '/api/Activity/del_family',
							data: { id }
						})
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							mask: true
						})
						this.getList()
					} else if (res.cancel) {
					}
				}
			});
		}
	}
}
</script>

<style>
page {
	background-color: #F7F7F7;
}
</style>
<style lang="scss" scoped>
.remove{
	position: absolute;
	right: 20upx;
	top: 20upx;
}
.info{
	display: flex;
	align-items: flex-start;
	.edit{
		margin-top: 40upx;
		min-width: 80upx;
		text-align: right;
		font-size: 28rpx;
		color: gray;
	}
}
.listbox {
	position: relative;
	width: 630rpx;
	height: 120rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 40rpx 30rpx;
	margin: 0 auto 4rpx auto;

	.namebox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.nameinfo {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin-right: 32rpx;
		}

		.defaultbox {
			width: 94rpx;
			height: 36rpx;
			background: linear-gradient(180deg, #CB9852 0%, #F8DEB7 100%);
			border-radius: 18rpx 18rpx 18rpx 0rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.info{
		display: flex;
		justify-content: flex-end;
	}

	.addressinfo {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		margin-top: 40rpx;
		flex:1;
	}
}

.navbut {
	width: 100%;
	height: 170rpx;
	position: fixed;
	bottom: 0rpx;
	background-color: #F7F7F7;

	.addaddress {
		width: 690rpx;
		height: 84rpx;
		background: linear-gradient(0deg, #FF8A9B 0%, #FF8A9B 100%);
		border-radius: 83rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		justify-content: center;
		line-height: 84rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
	}
}
</style>
